<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en">
<!-- 设置网页语言为英语 -->
<head>
    <!-- 文档头部，包含元数据 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置视口，使页面在移动设备上正确显示 -->
    <title>Document</title>
    <!-- 页面标题 -->
</head>
<body>
    <!-- 页面主体内容 -->
    
    <!-- 
        注释掉的script标签展示了一个data url的基本概念:
        data url是一种将小文件直接嵌入到网页中的方式
        格式: data:[<mediatype>][;base64],<data>
        这个例子中展示了一个简单的javascript alert弹窗
    -->
    <!-- <script src="data:,alert(1);">
        // data:[<mime-type>][;charset=<charset>][;base64],<daten>
            // mime-type: MIME类型 表示资源类型的
            // charset: 字符集
            // base64:  64位编码
            /*
            btoa(data)  :  将数据进行base64编码
            atob(data)  :  将base64编码的数据进行解码
            */
    </script> -->

    <!-- 文件选择器和图片预览区域 -->
    <div>
        <!-- 容器div，包含文件选择和图片预览 -->
        
        <!-- 文件输入框，用于选择本地图片文件 -->
        <input type="file"><br>
        <!-- input元素:
             type="file": 文件选择器类型
             允许用户从本地设备选择文件 -->
        
        <!-- 图片显示区域，用于预览选中的图片 -->
        <img src="" >
        <!-- img元素:
             src属性初始为空，通过JavaScript动态设置
             用于显示选中文件的预览 -->
    </div>

    <script>
        // JavaScript代码部分，实现图片预览功能
        
        // 获取页面中的input元素和img元素
        const input = document.querySelector('input');
        // querySelector选择第一个input元素
        const img = document.querySelector('img');
        // querySelector选择第一个img元素

        // 为input元素添加change事件监听器，当用户选择文件时触发
        input.onchange = (e) => {
            // 事件处理函数，参数e是事件对象
            
            // 获取用户选择的第一个文件对象
            const file = e.target.files[0];
            // e.target指向事件触发元素(input)
            // files是input元素的文件列表属性
            // [0]获取第一个文件(因为input默认允许选择一个文件)
            
            // 创建一个FileReader对象，用于读取文件内容
            const reader = new FileReader();
            // FileReader是HTML5 API，用于异步读取文件内容
            
            // 使用readAsDataURL方法读取文件，将文件转换为base64编码的data URL
            reader.readAsDataURL(file);
            // readAsDataURL将文件读取为base64编码的数据URL格式
            // 格式为: data:[<mediatype>];base64,<data>
            
            // 当文件读取完成时触发onload事件
            reader.onload = (e) => {
                // 文件读取完成的回调函数
                
                // 将读取到的data URL设置为图片的src属性，实现图片预览
                img.src = e.target.result;
                // e.target指向FileReader对象
                // result属性包含读取的文件数据(这里是data URL)
                // 设置img的src属性即可显示图片
            }
        }
    </script>
</body>
</html>